<template>
  <div>

    <div v-for="item of houseData" :key="item.id" id="kuai">
      房间号:{{item.room_code}}
      {{item.room_type.typeName}}
      <div class="k"   v-show="item.room_status===1">
        <p>净房</p>
          <button type="button" class="b1" >办理入住</button>
          <button type="button" class="b1" >预定</button>
      </div>
      <div class="k1"   v-show="item.room_status===2">
        <p>已入住</p>
        <button type="button" class="b1" >结账退房</button>
        <button type="button" class="b1" >续住</button>
        <button type="button" class="b1" >查看入住信息</button>
      </div>
      <div class="k2"   v-show="item.room_status===3">
        <p>已预定</p>
        <button type="button" class="b1" >查看预订单</button>
        <button type="button" class="b1" >办理入住</button>
      </div>
      <div class="k3"    v-show="item.room_status===4">
        <p>维修中</p>
        <button type="button" class="b1" >设置房态</button>
      </div>
      <div class="k4"    v-show="item.room_status===5">
        <p>脏房</p>
        <button type="button" class="b1" >设为净房</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    loadData() {
      this.$axios
        .get("/room", {

        })
        .then((res) => {
          this.houseData = res.data.data;
        })
        .catch((error) => {

        });
    },
  },

  data() {
    return {

      houseData: [


      ],


    }
  },
  mounted(){

    this.loadData();
  },

}
</script>

<style scoped>
#kuai{
  border-radius: 2px;
  margin-top: 10px;

  float: left;
  margin-left: 10px
}
.k{

  width:300px ;
  height:180px;
  margin-top: -18px;
  background: #67C23A ;
}
.k1{
  width:300px ;
  height:180px;
  margin-top: -18px;
  background: #E6A23C ;
}
.k2{
  width:300px ;
  height:180px;
  margin-top: -18px;
  background:  #409EFF;
}
.k3{
  width:300px ;
  height:180px;
  margin-top: -18px;
  background: #F56C6C ;
}
.k4{
  width:300px ;
  height:180px;
  margin-top: -18px;
  background: #909399 ;
}
.b1{
  margin-top: 120px ;
  float: right;
}
</style>
